// todo 引入createContext，用于跨组件通信
import React, { Component, createContext } from "react";
import Child2 from "./Child2";

// todo 执行以后会返回context对象
const context = createContext();
// todo  提供者    消费者
export const { Provider, Consumer } = context;
// todo Provider使用的时候需要又一个属性value
// todo Consumer里面需要写一个函数，函数可以接收一个value参数，需要返回jsx

// todo context是具有响应式的

// const Child2 = () => {
//   return (
//     <div>
//       child2组件 -
//       <Consumer>
//         {(value) => {
//           return (
//             <span>
//               {value.count} - {value.name}
//             </span>
//           );
//         }}
//       </Consumer>
//     </div>
//   );
// };

class Child extends Component {
  render() {
    return (
      <>
        <div>
          child组件 -
          <Consumer>
            {(value) => (
              <span>
                {value.count} - {value.name}
              </span>
            )}
          </Consumer>
        </div>
        <Child2 />
      </>
    );
  }
}

class App extends Component {
  state = {
    name: "zhangmou",
  };

  fn = () => {
    this.setState({
      name: "xiaozhang",
    });
  };

  render() {
    return (
      <Provider
        value={{
          count: 123,
          name: this.state.name,
        }}
      >
        <h2>context</h2>
        <button onClick={this.fn}>btn</button>
        <Child />
      </Provider>
    );
  }
}

export default App;
